<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 11:33:36
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-23 17:32:52
-->
<template>
  <div>
    <a-modal v-model:open="modalOpen" :title="title" width="50%" :footer="null">
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="商品名称"
            name="name"
            :rules="[{ required: true, message: '请输入商品名称' }]"
          >
            <a-input v-model:value="formData.name" placeholder="输入品牌名称" />
          </a-form-item>
          <a-form-item
            label="所属类目"
            name="typeId"
            :rules="[{ required: true, message: '请选择所属类目' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.typeId"
              @change="handleChooseCate"
              placeholder="请选择所属类目"
            >
              <a-select-option
                v-for="item in cataLogSource"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="所属子类目"
            name="subTypeId"
            :rules="[{ required: true, message: '请选择所属子类目' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.subTypeId"
              placeholder="请选择所属子类目"
            >
              <template v-if="cateLogChildList">
                <a-select-option
                  v-for="item in cateLogChildList.childrenList"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-select-option
                >
              </template>
            </a-select>
          </a-form-item>
          <a-form-item
            label="所属品牌"
            name="brandId"
            :rules="[{ required: true, message: '请选择所属品牌' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.brandId"
              placeholder="请选择所属品牌"
            >
              <a-select-option
                v-for="item in brandSource"
                :key="item.id"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="发售价格"
            name="minOriginalPrice"
            :rules="[{ required: true, message: '请输入发售价格' }]"
          >
            <a-input
              v-model:value="formData.minOriginalPrice"
              placeholder="请输入发售价格"
              suffix="元"
            ></a-input>
          </a-form-item>
          <a-form-item label="商品图片" name="coverPic" ref="uploadImg">
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChangeCoverPic"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formData.coverPic"
                  :src="formData.coverPic"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.png格式</div>
            </div>
          </a-form-item>
          <a-form-item label="设置标签" name="status">
            <a-select
              v-model:value="formData.pushType"
              placeholder="请选择标签"
            >
              <a-select-option :value="0">无</a-select-option>
              <a-select-option :value="3">全部</a-select-option>
              <a-select-option :value="1">首页全新专区</a-select-option>
              <a-select-option :value="2">分类全新专区</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="推送图片"
            name="pushCoverPic"
            ref="pushCoverPicRef"
          >
            <div class="img-item">
              <a-upload
                name="avatar"
                accept=".jpg,.png,.gif,.jpeg,.bmp,.svg,.webp,.apng"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                :action="null"
                :before-upload="beforeUpload"
                @change="handleChangePushCoverPic"
              >
                <img
                  style="width: 102px; height: 102px"
                  v-if="formData.pushCoverPic"
                  :src="formData.pushCoverPic"
                  alt="avatar"
                />
                <div v-else>
                  <loading-outlined v-if="loading1"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                </div>
              </a-upload>
              <div class="img-label">仅支持上传.jpg.png格式</div>
            </div>
          </a-form-item>
          <a-form-item
            label="状态"
            name="state"
            :rules="[{ required: true, message: '请选择状态' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.state"
              placeholder="请选择状态"
            >
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="2">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirm"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import {
  catalogList,
  brandList,
  getTopLastestType,
  goodsSave,
} from "@/api/goodConfig.js";
import { message } from "ant-design-vue";
import { singleUploadsFile } from "@/api/upload.js";
const modalOpen = ref(false);
const formRef = ref(null);
const formData = ref({});
const title = ref("");
// 获取品牌
const brandSource = ref([]);
const getBrandList = () => {
  brandList({ page: 1, pageSize: 999 }).then((res) => {
    brandSource.value = res.data.list.map((item) => {
      return {
        value: item.id,
        label: item.name,
      };
    });
  });
};
const cataLogSource = ref([]);
const cateLogChildList = ref([]);
const getCatalogList = (id) => {
  getTopLastestType().then((res) => {
    cataLogSource.value = res.data;
    if (id) {
      cateLogChildList.value = cataLogSource.value.find(
        (item) => item.id === id
      );
    }
  });
};

function handleChooseCate(id) {
  cateLogChildList.value = cataLogSource.value.find((item) => item.id === id);
}
const open = (titles, record) => {
  title.value = titles;
  getCatalogList(record.typeId);
  getBrandList();
  modalOpen.value = true;
  nextTick(() => {
    formData.value = Object.assign({}, record);
    formRef.value.resetFields();
  });
};
// 上传图片
function beforeUpload(file) {
  //判断是否小于20M
  let isLt20M = file.size < 1024 * 1024 * 20;
  if (!isLt20M) {
    //将fileList中本次file文件删掉
    fileList.splice(fileList.indexOf(file), 1);
    message.error("所选文件单个超过20M，已自动过滤，请检查~");
  }
  return false;
}
const loading = ref(false);
const handleChangeCoverPic = (file) => {
  loading.value = true;
  let formState = new FormData();
  formState.append("file", file.file);
  formState.append("type", "1");
  singleUploadsFile(formState).then((res) => {
    if (res.code == 200) {
      loading.value = false;
      formData.value.coverPic = res.data;
      pushCoverPicRef.value.clearValidate();
    }
  });
};
const pushCoverPicRef = ref(null);
const loading1 = ref(false);
const handleChangePushCoverPic = (file) => {
  loading.value = true;
  let formState = new FormData();
  formState.append("file", file.file);
  formState.append("type", "1");
  singleUploadsFile(formState).then((res) => {
    if (res.code == 200) {
      loading1.value = false;
      formData.value.pushCoverPic = res.data;
      pushCoverPicRef.value.clearValidate();
    }
  });
};
const emits = defineEmits(["refreshList"]);
const handleSubmit = async (res) => {
  formRef.value.validate().then((res) => {
    goodsSave(formData.value).then((result) => {
      if (result.code === 200) {
        message.success("操作成功");
        modalOpen.value = false;
        emits("refreshList");
      }
    });
  });
};
const confirm = () => {
  formData.value = {
    name: undefined,
    typeId: undefined,
    minOriginalPrice: undefined,
    subTypeId: undefined,
    pushType: undefined,
    coverPic: undefined,
    brandId: undefined,
    pushCoverPic: undefined,
    state: undefined,
  };
};
defineExpose({ modalOpen, open });
</script>
<style lang="scss" scoped></style>
